<template>
  <el-main>
    <!-- 新增按钮 -->
    <el-button icon="Plus" type="primary" size="default" @click="addBtn">新增</el-button>

<!-- 表格 -->
<el-table :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="menuId" :data="tableList" border
      stripe>
      <el-table-column prop="title" label="菜单名称"></el-table-column>
      <el-table-column prop="type" label="菜单类型">
        <template #default="scope">
          <el-tag v-if="scope.row.type == '1'" type="success" size="default">菜单</el-tag>
          <el-tag v-if="scope.row.type == '2'" type="danger" size="default">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="图标">
        <template #default="scope">
          <el-icon>
            <!-- 动态组件展示图标 -->
            <component v-if="scope.row.icon" :is="scope.row.icon"></component>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="parentName" label="上级菜单"></el-table-column>
      <el-table-column prop="path" label="路由"></el-table-column>
      <el-table-column prop="code" label="权限字段"></el-table-column>
      <el-table-column prop="orderNum" label="序号"></el-table-column>
      <el-table-column label="操作" width="220" align="center">
        <template #default="scope" >
          <el-button icon="Edit" type="primary" size="default" @click="editBtn(scope.row)">编辑</el-button>
          <el-button icon="Delete" type="danger" size="default" @click="deleteBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <SysDialog :title="dialog.title" :visible="dialog.visible" :height="dialog.height" :width="dialog.width"
      @close="parentClose" @confirm="commit">
      <template v-slot:content>
        <el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false" size="default">
          <el-form-item prop="type" label="菜单类型">
            <el-radio-group v-model="addModel.type">
              <el-radio :label="'1'">菜单</el-radio>
              <el-radio :label="'2'">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item prop="parentId" label="上级菜单">
                <el-tree-select @check="nodeClick" v-model="addModel.parentId" :data="parentList"
                  :render-after-expand="false" show-checkbox check-strictly/>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item prop="title" label="菜单名称">
                <el-input v-model="addModel.title"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item prop="code" label="权限字段">
                <el-input v-model="addModel.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item prop="orderNum" label="菜单序号">
                <el-input v-model="addModel.orderNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="addModel.type != '2'">
            <el-col :span="12" :offset="0">
              <el-form-item prop="path" label="路由">
                <el-input v-model="addModel.path"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item prop="icon" label="菜单图标">
                <el-input v-model="addModel.icon"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </SysDialog>
  </el-main>
</template>

<script lang="ts" setup>
import { addApi, deleteApi, editApi, getParentApi, listApi } from '@/api/menu';
import { Menu } from '@/api/menu/MenuModel';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { ElMessage, FormInstance } from 'element-plus';
import { nextTick, onMounted, reactive, ref } from 'vue';

const { dialog, parentClose, parentShow } = useDialog();
import useWarnConfirm from '@/hooks/useWarnConfirm';
const { global } = useWarnConfirm();

const tags = ref("");

const addBtn = () => {
  tags.value = "0";
  dialog.title = "新增";
  dialog.height = 200;
  getParentList();
  parentShow();
  // 清空表单
  addRef.value?.resetFields();
}

const tableList = ref<any>([]);

const getList = async ()=>{
  let res = await listApi();
  if (res && res.code == 200){
    console.log(res);
    tableList.value = res.data;
  }
}

const deleteBtn = async(row: Menu) => {
  console.log(row);
  const confirm = await global.$warningConfirm("确定删除该数据吗?");
  if(confirm){
    let res = await deleteApi(row);
    if(res && res.code == 200){
      ElMessage.success(res.msg);
      getList();
    }
  }
}

const editBtn = (row: Menu) => {
  console.log(row)
  tags.value = "1";
  dialog.title = "编辑";
  // 获取非按钮类型的菜单资源
  getParentList();

  nextTick(() => {
    Object.assign(addModel, row);
  })
  parentShow();
  // 清空表单
  addRef.value?.resetFields();
}

onMounted(() => {
  getList();
})

//表单ref属性
const addRef = ref<FormInstance>();

//新增表单弹窗绑定的数据
const addModel = reactive({
  menuId: "",
  parentId: "",
  title: "",
  code: "",
  type: "",
  icon: "",
  path: "",
  parentName: "",
  orderNum: "",
});

const parentList = ref<any>([]);

const getParentList = async() => {
  let res = await getParentApi();
  if(res && res.code == 200){
    parentList.value = res.data;
  }
}

const nodeClick = (e: any) => {
  addModel.parentName = e.title;
}

const commit = () => {
  addRef.value?.validate(async (valid) => {
    console.log(addModel);
    console.log(valid);
    if(valid){
      let res = null;
      if (tags.value == "0") {
        res = await addApi(addModel);
      }else{
        res = await editApi(addModel);
      }
      if(res && res.code == 200){
        ElMessage.success(res.msg);
        getList();
        parentClose();
      }
    }
  });
};

//表单验证规则
const rules = reactive({
  type: [
    {
      required: true,
      message: "请选择菜单类型",
      trigger: "blur",
    },
  ],
  parentId: [
    {
      required: true,
      message: "请选择上级菜单",
      trigger: "blur",
    },
  ],
  title: [
    {
      required: true,
      message: "请填写菜单标题",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请填写菜单权限字段",
      trigger: "blur",
    },
  ],
  icon: [
    {
      required: true,
      message: "请填写菜单图标",
      trigger: "blur",
    },
  ],
  path: [
    {
      required: true,
      message: "请填写菜单path",
      trigger: "change",
    },
  ],
  orderNum: [
    {
      required: true,
      message: "请填写序号",
      trigger: "change",
    },
  ],
});
</script>

<style scoped></style>